import React, { Component } from 'react';

class UsernameInput extends Component {

    constructor(props){
        super(props);

        let placeholder = this.props.placeholder;
        let type = this.props.type;

        if(placeholder === undefined){
            placeholder = "用户名/邮箱";
        }

        if(type === undefined){
            type = "text";
        }


        this.state = {
            clear:'none',
            value:'',
            placeholder:placeholder,
            type:type
        }

    }

    //显示清楚按钮 todo:职责单一
    displayClear(e)
    {
        let inputVlue = e.target.value;

        if(inputVlue.length > 0){
            
            this.setState({
                clear:'inline',
                value:inputVlue
            });
        } else{
            this.setState({
                clear:'none',
                value:inputVlue
            });
        }

        this.props.getValue(inputVlue);

    }

    //清除文本
    clearVlue(e){
        this.setState({
            value:'',
            clear:'none'
        });

        this.props.getValue('');
    }

    render() {
        return (
            <div className='auth-login-input-box'>
                <div className='auth-login-input-wrapper'>
                    <i className='icon iconfont icon-my auth-icon'></i>

                    <input onInput={(e)=>this.displayClear(e)} 
                        placeholder={this.state.placeholder} 
                        className='auth-input auth-input-username' 
                        value={this.state.value}
                    type={this.state.type} />

                    <i onClick={(e)=>this.clearVlue(e)} style={{display:this.state.clear}} className='icon iconfont icon-clear clear'></i>
                </div>
            </div>
        );
    }
}

export default UsernameInput;